<div class="pac-page-header">
  <div class="w-full flex flex-wrap justify-between items-center">
    <h2 class="pac-page-title">
      {{ 'PAC.Project.ManageIndicators' | translate: {Default: "Manage Indicators"} }}
    </h2>

    <div class="flex gap-2 ml-auto">
      <input #fileUpload type="file" class="file-input invisible"
        (change)="handleUploadChange($event)"
        (click)="fileUpload.value=null;">
      <div ngmButtonGroup>
        <button mat-icon-button displayDensity="cosy" class="ngm-copilot-command-button ngm-toolbar__action"
          [matTooltip]=" 'Copilot.GenerateWithAI' | translate: {Default: 'Generate with AI'} "
          (click)="aiRegister()">
          <mat-icon fontSet="material-icons-outlined">auto_fix_high</mat-icon>
        </button>

        <button mat-raised-button displayDensity="cosy" color="primary"
          (click)="register()">
          {{ 'PAC.INDICATOR.MY_INDICATORS.REGISTER' | translate: {Default: "Register"} }}
        </button>
        
        @if (hasDirty()) {
          <button mat-flat-button displayDensity="cosy" (click)="saveAll()">
            {{ 'PAC.INDICATOR.SaveAll' | translate: {Default: "Save All"} }}
          </button>
        }
        
        <button mat-icon-button displayDensity="cosy"
          [cdkMenuTriggerFor]="menu"
          #mt="cdkMenuTriggerFor"
          [class.active]="mt.isOpen()"
        >
          <mat-icon fontSet="material-icons-outlined">more_horiz</mat-icon>
        </button>
      </div>
    </div>
  </div>

  <nav mat-tab-nav-bar class="pac-tab-nav-bar max-w-full self-stretch" color="accent" disableRipple displayDensity="cosy" mat-stretch-tabs="false" mat-align-tabs="start"
    [tabPanel]="tabPanel"
  >
    <span mat-tab-link [routerLink]="['.']"
      routerLinkActive #rla="routerLinkActive"
      [routerLinkActiveOptions]="{exact: true}"
      [active]="rla.isActive"
    >
      <mat-icon fontSet="material-icons-outlined" displayDensity="cosy">settings</mat-icon>
      {{ 'PAC.INDICATOR.All' | translate: {Default: "All"} }}
    </span>

    <!-- <span mat-tab-link [routerLink]="['./all']"
      routerLinkActive #rla2="routerLinkActive"
      [routerLinkActiveOptions]="{exact: true}"
      [active]="rla2.isActive"
    >
      <mat-icon fontSet="material-icons-outlined" displayDensity="cosy">group_add</mat-icon>
      {{ 'PAC.INDICATOR.MY_INDICATORS.ALL' | translate: {Default: "All"} }}
    </span> -->

    <span mat-tab-link [routerLink]="['approvals']"
      routerLinkActive #rla3="routerLinkActive"
      [routerLinkActiveOptions]="{exact: true}"
      [active]="rla3.isActive"
    >
      <mat-icon fontSet="material-icons-outlined" displayDensity="cosy">verified_user</mat-icon>
      {{ 'PAC.INDICATOR.MY_INDICATORS.Approvals' | translate: {Default: "Approvals"} }}
    </span>

    @for (indicator of openedLinks(); track indicator) {
      <span mat-tab-link [routerLink]="[indicator.id || indicator.code]"
        [active]="indicator.id === currentLink()?.id || indicator.code === currentLink()?.code">

        @if (isDirty(indicator.id)) {
          <span class="ping-badge pointer-events-none absolute -left-2 top-2 flex h-2 w-2">
            <span class="animate-ping absolute inline-flex h-full w-full rounded-full opacity-75"></span>
            <span class="relative inline-flex rounded-full h-2 w-2"></span>
          </span>
        }

        <mat-icon fontSet="material-icons-outlined" displayDensity="cosy">trending_up</mat-icon>
        @if (indicator.id === NewIndicatorCodePlaceholder) {
          <span class="mr-2">{{ 'PAC.INDICATOR.New' | translate: {Default: 'New'} }}</span>
        }

        @if (indicator.name) {
          <span class="overflow-hidden text-ellipsis max-w-[200px]" [title]="indicator.name">{{indicator.name}}</span>
        }
        <button mat-icon-button class="pac-tab-close" displayDensity="compact" (click)="removeOpenedLink(indicator)">
          <mat-icon>cancel</mat-icon>
        </button>
      </span>
    }
  </nav>
</div>
<mat-divider></mat-divider>

<mat-tab-nav-panel #tabPanel class="pac-page-body flex flex-col items-center"
  [@routeAnimations]="o.isActivated && o.activatedRoute.routeConfig.path">
  <router-outlet #o="outlet"></router-outlet>
</mat-tab-nav-panel>

<ng-template #menu>
  <div cdkMenu class="cdk-menu__medium">
    <button cdkMenuItem [disabled]="!selectedIndicators()?.length" (click)="export()">
      <div class="flex items-center">
        <i class="ri-download-2-line mr-1"></i>
        {{ 'PAC.INDICATOR.MY_INDICATORS.EXPORT' | translate: {Default: "Export"} }}
      </div>
    </button>

    <button cdkMenuItem (click)="fileUpload.click()">
      <i class="ri-upload-2-line mr-1"></i>
      <span class="whitespace-nowrap">{{ 'PAC.MENU.INDICATOR.BATCH_UPLOAD' | translate: {Default: "Batch Upload"} }}</span>
    </button>

    <div class="border-b border-solid border-divider-deep my-1"></div>

    <button cdkMenuItem class="danger" [disabled]="!selectedIndicators()?.length" (click)="deleteSelected()">
      <i class="ri-delete-bin-line mr-1"></i>
      {{ 'PAC.ACTIONS.Delete' | translate: {Default: "Delete"} }}
    </button>
  </div>
</ng-template>
